<template>
    <div class="app-container">
        <el-row :gutter="30" :style="{height: '400px', width: '100%'}">
            <div class="chart" ref="chart" :style="{height:'100%',width:'100%'}"></div>
        </el-row>
    </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/views/dashboard/mixins/resize'

export default {
    name: 'ChartLine',
    mixins: [resize],
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs['chart'], 'macarons')
            this.setOptions(this.chartData)
        },
        setOptions() {
            this.chart.setOption({
                title: {
                    text: '未来一周气温变化',
                    subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['最高', '最低'],
                },
                toolbox: {
                    show: true,
                    orient: 'horizontal', //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
                    left: 'right',  //left的值可以是像20这样的具体像素值，可以是像'20%'这样相对于容器高宽的百分比，也可以是'left','center','right'
                    top: 'top', //top的值可以是像20这样的具体像素值，可以是像'20%'这样相对于容器高宽的百分比，也可以是'top','middle','bottom'
                    color: ['#1e90ff', '#22bb22', "#4b0082", '#d2691e'],
                    backgroundColor: 'rgba(0,0,0,0)', //工具箱背景颜色
                    borderColor: '#ccc',  //工具箱边框颜色
                    borderWidth: 0,  //工具箱边框线宽，单位px,默认为0（无边框）
                    padding: 5,  //工具箱内边距，单位px, 默认各方向内边距为5，
                    showTitle: true,
                    feature: {
                        mark: {
                            show: true,
                            title: {
                                mark: '辅助线-开关',
                                markUndo: '辅助线-删除',
                                markClear: '辅助线-清空'
                            },
                            lineStyle: {
                                width: 1,
                                color: '#1e90ff',
                                type: 'dashed'
                            }
                        },
                        dataZoom: {
                            show: true,
                            title: {
                                dataZoom: '区域缩放',
                                dataZoomReset: '区域缩放-后退'
                            }
                        },
                        dataView: {
                            show: true,
                            title: '数据视图',
                            readOnly: true,
                            lang: ['数据视图', '关闭', '刷新'],
                            optionToContent: function(opt) {
                                console.log(opt)
                            }
                        },
                        magicType: {
                            show: false,
                            type: ['line', 'bar']
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                calculable: true,
                dataZoom: {
                    show: true,  //是否显示数据区域缩放
                    realtime: true,  //缩放变化是否实时显示
                    start: 20,  //数据缩放，选择结束比例，默认0（%）
                    end: 80  //数据缩放，选择结束比例，默认100（%）
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,  //类目起始和结束两端空白策略，见下图，默认为true留空，false则顶头
                        data: function() {
                            let list = []
                            for (let i = 1; i <= 30; i++) {
                                list.push('2013-03-' + i)
                            }
                            return list
                        }()
                    },
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '最高',
                        type: 'line',
                        data: function() {
                            let list = []
                            for (let i = 1; i <= 30; i++) {
                                list.push(Math.round(Math.random()*20)+10)
                            }
                            return list
                        }()
                    },
                    {
                        name: '最低',
                        type: 'line',
                        data: function() {
                            let list = []
                            for (let i = 1; i <= 30; i++) {
                                list.push(Math.round(Math.random()*10))
                            }
                            return list
                        }()
                    }
                ]
            });
        }
    }
}
</script>